<template>
  <div>
    <t-label
      :label="label"
      showHint
      hintMode="custom"
      hintMsg="hintMsg"
      @click="click"
    />

    <t-space />
    <t-label label="你好我是带 icon 的label" :showIcon="true" icon="settings" />

    <t-space />
    <t-label
      valueType="static"
      constValue="constValue"
      labelValue="labelValue"
      :showIcon="true"
      icon="settings"
    />

    <t-space />
    <!-- <t-button @click="visible = !visible"> 改变 visible 属性 </t-button> -->
    <t-label
      :visible="visible"
      label="你好我是测试 visible 属性的"
      :showIcon="true"
      icon="search"
    />

    <t-space />
    <!-- <t-button @click="test = '1235'"> 点击改变 label 内容 </t-button> -->
    <t-label :label="test" :showIcon="true" icon="clear" />

    <t-space />
    <!-- <t-button @click="labelValue = 'labelValue++'">
      点击改变 labelValue 内容
    </t-button> -->
    <t-label
      valueType="expression"
      constValue="constValue"
      :labelValue="labelValue"
      :showIcon="true"
      icon="clear"
      @data-changed="f"
    />
  </div>
</template>

<script setup>
  import { useQuasar } from '@teld/q-components';
  import { ref } from 'vue';

  const $q = useQuasar();

  const label = ref('你好我是测试label');
  const visible = ref(true);
  const test = ref('你好我是点击切换label内容');
  const labelValue = ref('labelValue');

  function click(params) {
    label.value = Math.random() + '';
  }
  function f(params) {
    $q.notify('data-changed');
  }
</script>

<style lang="scss" scoped>
  .t-space {
    margin-bottom: 10px;
  }
</style>
